<template>
    <div class="hesder">
        <div>
            <span class="textcdl">叩丁狼电商运营平台</span>
            <el-icon :size="20" @click="menuStore.isCollapse">
                <Menu />
            </el-icon>
        </div>
        <div>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    {{ userStore.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="index">&nbsp;首页&nbsp;</el-dropdown-item>
                        <el-dropdown-item command="logout">&nbsp;退出&nbsp;</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

</template>

<script setup lang="ts">
import { Menu, ArrowDown } from "@element-plus/icons-vue";
import { useMenu } from '@/store/menu'
import { useUser } from '@/store/user'
import { ElMessage } from 'element-plus'
import { useRouter, } from "vue-router";
import { tokenout } from '@/common/tokenout'
import { logOutApi } from "../api";
const menuStore = useMenu();
const userStore = useUser();
const router = useRouter()


const handleCommand = (command: string) => {
    console.log(command);
    if (command === "index") {
        router.push('/index')
    } else if (command === "logout") {
        tokenout(
            () => {
                // 登出请求
                logOutApi().then((res) => {
                    
                })
            },
            () => {
                ElMessage.success("退出成功")
            })
    }

}

</script>

<style lang="less" scoped>
.hesder {
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .textcdl {
        font-size: 24px;
        margin-right: 20px;
    }

    :deep(.el-icon) {
        display: inline-block;
        vertical-align: -3px;

    }

    :deep(.el-dropdown) {
        color: #fff;
        margin-top: 3px;
    }



    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;

    }
}
</style>